<template>
  <div class="carousel">
		<b-carousel id="carousel-1" :interval="3000">
			<b-carousel-slide>
				<img slot="img" class="img-fluid w-100 pc" src="../images/banner-0.jpg">
				<img slot="img" class="img-fluid w-100 mobile" src="../images/banner-0-wap.jpg">
				<b-container>
					<div class="text">
						<h1 v-html="$t('home.banner[0].title')"></h1>
						<!-- <div class="info">
							<b-button variant="dark" @click="showVideo"><span><img src="../images/bo.png" width=20 height=20/>{{$t('home.banner[0].btn1')}}</span></b-button>
							<b-button variant="light"><a :href="$t('home.banner[0].link')" target="_blank">{{$t('home.banner[0].btn2')}}</a></b-button>
						</div> -->
					</div>
				</b-container>
			</b-carousel-slide>
		</b-carousel>
  </div>
</template>

<script>
export default {
	name: 'carousel',
  	data () {
		return {
				
		}
	},
	methods:{
		showVideo(){
			this.$emit('showVideo')
		}
	}
}
</script>

<style lang="scss" scoped>
.carousel{
	.img-fluid{
		&.pc{
			display: block;
		}
		&.mobile{
			display: none;
		}
	}
	.text{
		width:50%;
		h1{
			line-height: 50px;
			font-weight: normal;
			color: #FFFFFF;
			margin-bottom: 30px;
			letter-spacing: 8px;
		}
		.info{
			max-width:295px;
			margin:0 auto;
			display:flex;
			align-items: center;
    		justify-content: space-between;
			button{
				span{
					display: inline-block;
					padding-left:25px;
					position: relative;
					img{
						position:absolute;
						top:50%;
						left:0;
						margin-top:-10px;
						transition: transform .5s linear;
					}
					&:hover{
						img{
							transform: rotate(1turn);
						}
					}
				}
				a{
					color:#fff;
				}
			}
			
		}
	}
}
.fadeInUp {
    -webkit-animation: fadeInUp 1000ms .8s ease both;
}
@keyframes fadeInUp{
	0% {
	    opacity: 0;
	    -webkit-transform: translate3d(0,100%,0);
	    transform: translate3d(0,100%,0);
	}
	100% {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	}
}
</style>